<template>
  <div v-if="flag" style="z-index: 0">
    <pre :class="['language-' + modeValue, 'line-numbers']" style="padding:0">
      <code v-text="Pcodes" :class="['language-' + modeValue, 'line-numbers','pre']">
        
      </code>
    </pre>
  </div>
</template>
<script>
import Prism from "prismjs"; // 引入插件
import "prismjs/themes/prism.css"; // 引入样式
export default {
  props: ["codes", "modeValue"],
  data() {
    return {
      Pcodes: this.codes,
      flag: true,
    };
  },
  mounted() {
    Prism.highlightAll();
  },
  watch: {
    //　因为在vue生命周期中子组件创建后只会赋一次值，之后父组件数值变化了，
    //  子组件的数值也会变化，但显示的数据不会发生改变。
    //  所以需要监听父组件传参变化重新赋值让子组件重新赋值。
    //  此处的isShow并不是函数，而是对应的要赋值的变量名isShow
    codes(val) {
      console.log("代码修改");
      console.log(val);
      // this.flag = false;
      this.Pcodes = val;
      // setTimeout(() => {
      //   this.flag = true;
      // }, 100);
    },
  },
};
</script>

<style>
.pre {
  padding: 0 !important;
  padding: 0 20px 20px 0 !important;
  margin: 0 0 0 0 !important;
}
.line-numbers-rows {
  position: absolute;
  left: -100px !important;
}
</style>